<template>
	<view class="">
		<view class="scroll_header"></view>
		<view class="top_bg">
			<view class="top-width">
				<view class="top-title" @click="back_go">
					<image class="title_img" src="../static/left.png" mode="widthFix"></image>
					<view class="title_txt">应收账款</view>
				</view>
				<!-- <view class="choose_date" @click="chooseDays">
					<view class="today">今日</view>
					<image class="date_img" src="../static/down_jt.png" mode="widthFix"></image>
				</view> -->
				<view class="choose_date">
					<uni-data-select v-model="value" :localdata="range" :clear="false"
						@change="change_time"></uni-data-select>
					<image class="date_img" src="../static/down_jt.png" mode="widthFix"></image>
				</view>

			</view>
			<!-- 升序降序 -->
			<view class="sj_list">
				<image class="shengimg" @click="shengxu" src="../static/sheng.png" mode="widthFix"></image>
				<view class="search">
					<u-search placeholder="姓名/手机号" @clear="clear" @search="search" :showAction="false" shape="square"
						v-model="keyword"></u-search>
				</view>
				<image class="jiangimg" @click="jiangxu" src="../static/jiang.png" mode="widthFix"></image>
			</view>
		</view>
		<!--  -->
		<view class="zongqiankuan_txt">
			<view class="content_t">总欠款：<text class="num_price">{{zongqiankuan}}</text> </view>
		</view>
		<!-- 欠款列表人名单 -->

		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="width_bg" v-else v-for="(item,index) in item_lists" :key="index">
				<view class="center_width">
					<view class="name_info">
						<image class="avart_img" :src="item.users_model.user_picture" mode=""></image>
						<view class="">
							<view class="name_txt">{{item.consignee}}</view>
							<view class="phone-num">{{item.mobile}}</view>
							<view class="qk-text">欠款<text class="qk_num">{{item.order_amount}}</text> </view>
						</view>
					</view>
					<image class="left-jt" src="../../static/images/user/icon_right_arrow.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				keyword: '',
				value: 1,
				range: [{
					value: 1,
					text: "今天",
				}, {
					value: 2,
					text: "昨天",
				}],
				item_lists: [],
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				order: '',
				zongqiankuan: '',
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},
		onLoad() {
			this.getData()
		},
		methods: {

			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				console.log("eeeeeeeeeee", e);
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.item_lists.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			back_go() {
				uni.navigateBack({
					delta: 1
				})
			},
			// chooseDays() {
			// 	console.log("0000");
			// 	this.show = true
			// },

			// 时间选择
			change_time(e) {
				console.log("e:", e);
				this.value = e
			},
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			shengxu() {
				this.order = 'ASC'
				this.getData()
			},
			jiangxu() {
				this.order = 'DESC'
				this.getData()
			},
			search(e) {
				console.log("点击了搜索", e);
				this.getData()
			},
			clear(e) {
				this.getData()
			},
			getData() {
				this.$H.post('v2/store/user/Order', {
					time: this.value,
					field: 'order_amount',
					order: this.order,
					keyword: this.keyword,
					pagination: {
						count: this.count,
						page: this.more,
					},
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.u_loadmore = false
						this.item_lists = res.data
						this.zongqiankuan = res.paginated.price
					}
					console.log("获取账户明细列表", res);
				})
			},
		}
	}
</script>

<style>
	/deep/.uni-popper__arrow {
		left: 40% !important;
	}

	/deep/.uni-select {
		border: none !important;
		padding: 0px 14px !important;
	}

	/deep/.uni-select__input-text {
		color: #fff !important;
	}

	.name_info {
		display: flex;
	}

	.left-jt {
		width: 50rpx;
		display: block;
	}

	.qk-text {
		font-size: 33rpx;
		/* margin-top: 25rpx; */
		color: #444;
	}

	.qk_num {
		color: #e2995f;
		font-weight: 600;
		margin-left: 10rpx;
	}

	.phone-num {
		font-size: 33rpx;
		color: #666;
		margin-top: 7rpx;
	}

	.name_txt {
		font-size: 35rpx;
		color: #000;
		font-weight: 500;
	}

	.avart_img {
		width: 140rpx;
		height: 140rpx;
		display: block;
		margin-right: 20rpx;
	}

	.center_width {
		width: 690rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 25rpx 0;
	}

	.width_bg {
		width: 750rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.content_t {
		margin-left: 30rpx;
	}

	.num_price {
		font-weight: 600;
		color: #000;
	}

	.zongqiankuan_txt {
		width: 750rpx;
		padding: 25rpx 0 25rpx 0;
		font-size: 28rpx;
		color: #333;
		margin-top: 340rpx;
		background-color: #f0f5fb;
	}

	.sj_list {
		width: 690rpx;
		margin: 60rpx auto auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jiangimg {
		width: 50rpx;
		display: block;
	}

	.search {
		width: 500rpx;
	}

	.shengimg {
		width: 50rpx;
		display: block;
	}

	.date_img {
		width: 40rpx;
		display: block;
	}

	.today {
		font-size: 30rpx;
		color: #fff;
	}

	.choose_date {
		/* width: 200rpx; */
		display: flex;
		align-items: center;
	}

	.title_txt {
		font-size: 55rpx;
		font-weight: 700;
		color: #fff;
		margin-left: 20rpx;
	}

	.title_img {
		width: 45rpx;
		display: block;
	}

	.top-title {
		display: flex;
		align-items: center;
	}

	.top-width {
		width: 690rpx;
		margin: auto;
		padding-top: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top_bg {
		width: 750rpx;
		height: 345rpx;
		position: fixed;
		top: 0;
		z-index: 2;
		background-color: #6888c5;
		padding-bottom: 30rpx;

	}
</style>